<template>
  <div class="outer">
    <!-- 左侧选择栏 -->
    <Menu @selectIndex="getIndex"></Menu>
    <!-- 右侧简介 -->
    <div class="right">
      <user v-if="index == 1"></user>
      <list v-if="index == 2"></list>
      <shop v-if="index == 3"></shop>
      <coupon v-if="index == 4"></coupon>
      <order v-if="index == 5"></order>
      <dataSum v-if="index == 6"></dataSum>
    </div>
  </div>
</template>

<script>
import menu from "../menu/menu";
import user from "../user/user";
import order from "../order/order";
import shop from "../shop/shop";
import list from "../list/list";
import coupon from "../coupon/coupon";
import dataSum from "../data-sum/data-sum.vue";

export default {
  components: {
    Menu: menu,
    user,
    list,
    shop,
    order,
    coupon,
    dataSum,
  },
  props: {},
  data() {
    return {
      index: 1,
    };
  },
  watch: {},
  computed: {},
  methods: {
    getIndex(index) {
      this.index = index;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.outer {
  .right {
    margin-left: 240px;
  }
}
</style>